<template>
  <div class="table">

    <el-table
      ref="tableDataRef"
      :data="tableData"
      style="width: 100%"
      show-overflow-tooltip
      @selection-change="handleSelectionChange"
       @row-click="closePopover"

    >
      <el-table-column
        type="selection"
        :selectable="selectable"
        width="55"
        fixed
      />
      <el-table-column type="index" label="序号" width="70" fixed />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          {{ scope.row.sex == 0 ? "男" : "女" }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="age" label="年龄">
        <template #default="scope">
          <div class="age-cell">
            <span>{{ scope.row.age == 0 ? "15" : "16" }}</span>
            <el-icon class="warning-icon" @click="togglePopover(scope.row)">
              <Warning />
            </el-icon>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column prop="age" label="年龄" width="120">
        <template #default="scope">
          <div class="age-cell">
            <span>{{ scope.row.age == 0 ? "15" : "16" }}</span>
            <el-icon 
            v-if='scope.row.age<16'
              class="warning-icon" 
              @click.stop="togglePopover(scope.$index, scope.row, $event)"
              :style="{ color: activeIndex === scope.$index ? '#f56c6c' : '#e6a23c' }"
            >
              <Warning />
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="educationalBackground" label="学历" />
      <el-table-column prop="profession" label="专业" />
      <el-table-column prop="requireDeptName" label="申请部门" />
      <el-table-column prop="jobCode" label="岗位编号" />
      <el-table-column prop="applicationPositonName" label="岗位名称" />
      <el-table-column prop="hopeArrivalTime" label="期望到岗日期" />
      <!-- <el-table-column prop="createPersonName" label="创建人" /> -->
      <el-table-column prop="createPersonName" label="创建人">
        <template #default="{ row }">
          {{ row.createPersonName || row.name || "--" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button
            text
            type="info"
            class="other-btn"
            @click="handleInfo(scope.row)"
            >查看</el-button
          >
          <el-button
            v-hasPermi="['system:listener:InitiateAninterview']"
            v-if="[0, null].includes(scope.row.phase)"
            class="other-btn"
            type="primary"
            text
            @click="handleGetApplication(scope.row)"
            >发起面试</el-button
          >
          <!-- InitiateAninterview -->
        </template>
      </el-table-column>
    </el-table>

    <div 
      class="custom-tooltip" 
      v-show="showTooltip"
      :style="tooltipPosition"
      @click.stop
    >
      <div class="tooltip-content">
        <h4>《劳动合同法》规定</h4>
        <p>
          禁止招用未满18周岁的未成年人。违者将承担罚款、吊销执照或挪用非法证书，
          请务必核实员工年龄信息，合规用工，保护未成年人权益。
        </p>
      </div>
      <div class="tooltip-arrow"></div>
    </div>

    <Pagination
      class="pagination"
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    >
    </Pagination>


  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination/pageination.vue";
const emit = defineEmits([
  "handleInfo",
  "sizeChange",
  "currentChange",
  "handleGetApplication",
  "handleSelectionChange",
]);
const selectable = (row, index) => {
  return row.isTakeDown; // 如果 row.disabled 为 true，则禁用复选框
};
const showTooltip = ref(false)
const activeIndex = ref(null)
const tooltipPosition = ref({
  top: '0px',
  left: '0px'
})

const togglePopover = (index, row, event) => {
  if (activeIndex.value === index) {
    // 点击相同图标时关闭
    showTooltip.value = false
    activeIndex.value = null
  } else {
    // 设置提示框位置
    const rect = event.target.getBoundingClientRect()
    tooltipPosition.value = {
      top: `${rect.top + window.scrollY - 50}px`,
      left: `${rect.right + window.scrollX - 195}px` // 右侧10px位置
    }
    
    activeIndex.value = index
    showTooltip.value = true
  }
}

const closePopover = () => {
  showTooltip.value = false
  activeIndex.value = null
}

const props = defineProps({
  isShowBtn: Boolean,
  tableData: Array,
  currentTabs: String,
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: 10,
    }),
  },
});

// 查看
const handleInfo = (row) => {
  emit("handleInfo", row);
};

// 选择
const handleSelectionChange = (val) => {
  emit("handleSelectionChange", val);
};

// 编辑
const handleGetApplication = (row) => {
  emit("handleGetApplication", row);
};

const sizeChange = (size) => {
  console.log(size, "size");
  emit("sizeChange", size);
};
const currentChange = (page) => {
  console.log(page, "1");
  emit("currentChange", page);
};

</script>
<style scoped>
.pagination {
  margin-top: 15px;
}

.age-cell {
  /* display: flex; */
  align-items: center;

  gap: 8px;
}

.warning-icon {
  color: #e6a23c;
  cursor: pointer;
  transition: color 0.3s;
}

.warning-icon:hover {
  color: #f56c6c;
}

.legal-warning {
  /* padding: 10px; */
  /* line-height: 1.6; */
  border-radius: 4px;
  /* border: 1px solid var(--Primary7-500, #E81212); */
  background: var(--Primary7-50, #fde7e7);
  box-shadow: 0px 8px 12px 0px rgba(47, 4, 4, 0.1);

  h4 {
    color: #f56c6c;
    margin-bottom: 8px;
  }

  p {
    color: #606266;
    font-size: 14px;
  }
}

/* 全局样式或使用 ::v-deep 穿透 */
.custom-popover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0px !important;
}

.custom-popover .el-popover__title {
  display: none !important;
}

.legal-warning {
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #f56c6c;
}

.legal-warning h4 {
  color: #f56c6c;
  margin-bottom: 8px;
}

::v-deep(.el-popover) {
  background: #000 !important;
}
/* el-popper is-light el-tooltip el-popover custom-popover */

.table-container {
}

.age-cell {
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
}

.warning-icon {
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.3s;
}

.warning-icon:hover {
  transform: scale(1.2);
}

/* 自定义提示框样式 */
.custom-tooltip {
  position: absolute;
  width: 300px;
  padding: 12px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2000;
  border: 1px solid #ebeef5;
}

.tooltip-content h4 {
  margin-top: 0;
  color: #f56c6c;
  font-size: 15px;
}

.tooltip-content p {
  margin-bottom: 0;
  line-height: 1.6;
  font-size: 13px;
}

/* .tooltip-arrow {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #ebeef5;
} */

/* .tooltip-arrow::after {
  content: '';
  position: absolute;
  left: 1px;
  top: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid white;
} */
</style>
